<template>
  <el-dialog v-if="formData" v-model="openBoole" :close-on-click-modal="false" custom-class="mydialog" width="1240px"
    :title="title" @close="close">
    <el-form ref="openRef" :model="openForm" :rules="rules" label-width="100px" size="small">
      <el-row gutter="40" style="height: 600px;overflow-y: scroll">
        <el-col :span="24" style="padding-left: 0;padding-right: 0">
          <item-title title="基本信息" />
        </el-col>
        <el-col :span="8">
          <el-form-item label="代理商编号：">
            <span>{{ formData.agentNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代理商名称：">
            <span>{{ formData.agentName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="统一社会信用码：" label-width="140px">
            <span>{{ formData.creditCode }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="详细地址：">
            <span>{{ formData.address }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人：">
            <span>{{ formData.userName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="企业所在地区：" label-width="140px">
            {{ formData?.provinceName }}/{{ formData?.cityName }}/{{ formData?.areaName }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="联系电话：">
            <span>{{ formData.tel }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="24" style="padding-left: 0;padding-right: 0">
          <item-title title="首营资质" />
        </el-col>
        <el-col :span="24">
          <el-form-item prop="businessLicenseFiles" label-width="0">
            <div class="qualityFiles-container">
              <div v-for="(item,index) in openForm.businessLicenseFiles" :key="index" class="file-item">
                <image-upload-view ref="imageUploadView" :data="item" />
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer" style="display:flex;justify-content:center;align-items:center;">
        <el-button class="border-btn" size="small" style="margin-right: 20px;" @click="close">取消</el-button>
        <el-button class="main-btn" size="small" type="primary" @click="handlSubmit">提交审核</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { getCurrentInstance, inject, reactive, toRefs } from "vue";
import { crmStore } from "@CRM/store";

export default {
  name: "Qualification",
  setup(props, context) {
    
    const validateCardFiles = (rule, value, callback) => {
      var index = reactiveData.openForm.businessLicenseFiles.findIndex(
        (a) => a.url !== ""
      );
      if (index !== -1) {
        callback();
      } else {
        callback(new Error("资质不能全为空"));
      }
    };
    const api = inject("api");
    const currentInstance = getCurrentInstance();
    var reactiveData = reactive({
      openBoole: false,
      title: "完善资质",
      openForm: {
        id: 0,
        businessLicenseFiles: [],
      },
      rules: {
        businessLicenseFiles: [
          { required: true, validator: validateCardFiles, trigger: "blur" },
        ],
      },
      formData: null,
      openRef: null,
      qualificationStatus: null,
    });

    const open = (obj) => {
      reactiveData.openForm = {
        id: 0,
        businessLicenseFiles: [],
      };
      reactiveData.formData = obj;
      reactiveData.qualificationStatus = obj.qualificationStatus;
      if (obj.qualificationStatus === "0") {
        reactiveData.openForm.businessLicenseFiles = JSON.parse(
          JSON.stringify(
            crmStore.getters["jsonData/getJsonData"]["agent_qualification"].data
          )
        );
      } else {
        reactiveData.openForm.businessLicenseFiles = obj.businessLicenseFiles;
      }

      reactiveData.openBoole = true;
      reactiveData.openForm.id = obj.id;
    };

    const close = () => {
      reactiveData.openBoole = false;
    };

    const handlSubmit = () => {
      reactiveData.openRef.validate((valid) => {
        if (valid) {
          let val = "";
          let msg = "";
          if (
            reactiveData.qualificationStatus === "-1" ||
            reactiveData.qualificationStatus === "0"
          ) {
            val = "create";
            msg = "资质完善成功";
          }
          if (reactiveData.qualificationStatus === "2") {
            val = "change";
            msg = "资质变更成功";
          }
          if (
            reactiveData.qualificationStatus === "1" &&
            (reactiveData.formData?.flowStatus === "REPEAL" ||
              reactiveData.formData?.flowStatus === "REJECT")
          ) {
            val = "update";
            msg = "资质完善成功";
          }
          if (val) {
            api.channelAgent
              .QUALIFICATION_CREATE(reactiveData.openForm, val)
              .then((res) => {
                if (res.code === 0) {
                  currentInstance.proxy.customMessage({
                    type: "success",
                    message: msg,
                  });
                  context.emit("qualificationsSuccsess");
                  close();
                } else {
                  currentInstance.proxy.customMessage({
                    type: "error",
                    message: res.msg,
                  });
                }
              });
          }
        }
      });
    };

    return {
      ...toRefs(reactiveData),
      open,
      close,
      handlSubmit,
    };
  },
};
</script>

<style lang="scss" scoped>
.qualityFiles-container {
  display: flex;
  flex-wrap: wrap;
}
</style>
